<!--地图-->
<template>
  <!-- 高德地图组件 -->
  <div class="container">
    附近书店，图书馆
    <div
      :id="id"
      style="width:1400px;height:900px;"
      class="m-map"></div>
  </div>
</template>
<script>
export default {
  props: {
    // 经纬度，默认设为师大瑶湖图书馆
    point: {
      type:Array,
      default(){
        return [ 116.031993 , 28.6814 ]
      }
    }
  },
  data() {
    return {
      //地图id，多次调用该地图组件时，id必须动态生成
      id: `map`,
      //高德地图开发者秘钥，调用接口时使用
      key: '9072b03d0e1de24fcffbcf625866a689'
    }
  },
  watch: {
    //经纬度
    point: function (val, old) {
      this.map.setCenter(val)
      this.marker.setPosition(val)
    }
  },
  mounted() {
    //地图id，多次调用该地图组件时，id必须动态生成
    this.id = `map${Math.random().toString().slice(4, 6)}`
    // 封装回调函数，为了防止与其他地方定义的load冲突，最好重命名，如onmaploaded
    window.onmaploaded = () => {
      //地图基础控件添加，传递的第一个参数是DOM元素的id
      let map = new window.AMap.Map(this.id, {
        resizeEnable: true,//是否监控地图容器尺寸变化
        zoom: 11,//初始化地图层级
        center: this.point//初始化地图中心点
      })
      //地图图面
      this.map = map
      // 同时引入工具条插件
      window.AMap.plugin('AMap.ToolBar', () => {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        let toolbar = new window.AMap.ToolBar()
        map.addControl(toolbar)
        //创建地图点标记：
        let marker = new window.AMap.Marker({
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: this.point
        })
        this.marker = marker
        //将创建好的地图点标记控件 添加到地图map
        marker.setMap(map)
      })
      window.AMap.plugin('AMap.Geolocation', () => {
        let geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：无穷大
          maximumAge: 0,           //定位结果缓存0毫秒，默认：0
          convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true,        //显示定位按钮，默认：true
          buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        })
        function onComplete(obj){
          console.log(obj.message);
        }

        function  onError(obj){
          console.log(obj.message);
        }
        map.addControl(geolocation);
        console.log(geolocation.getCurrentPosition());
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
      })


    }
    //注意，此处url中传递的回调函数名，必须与上面一致
    const url = `https://webapi.amap.com/maps?v=1.4.15&key=${this.key}&callback=onmaploaded`
    let jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  },
}
</script>
